import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
import legacy from '@vitejs/plugin-legacy'
import postCssPxToRem from 'postcss-pxtorem'

import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  plugins: [
    react(),
    legacy({
      targets: ['defaults', 'ie >= 11', 'chrome 52'], //需要兼容的目标列表，可以设置多个
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
      renderLegacyChunks: true
      // polyfills: [
      //   'es.symbol',
      //   'es.array.filter',
      //   'es.promise',
      //   'es.promise.finally',
      //   'es/map',
      //   'es/set',
      //   'es.array.for-each',
      //   'es.object.define-properties',
      //   'es.object.define-property',
      //   'es.object.get-own-property-descriptor',
      //   'es.object.get-own-property-descriptors',
      //   'es.object.keys',
      //   'es.object.to-string',
      //   'web.dom-collections.for-each',
      //   'esnext.global-this',
      //   'esnext.string.match-all',
      // ],
    })
  ],
  build: {
    target: 'es2015',
    //移除生产环境log
    minify: 'terser',
    terserOptions: {
      compress: {
        //生产环境时移除console
        drop_console: true,
        drop_debugger: true
      }
    },
    rollupOptions: {
      output: {
        entryFileNames: 'js/[name].[hash].js',
        chunkFileNames: 'js/[name].[hash].js',
        assetFileNames(assetInfo) {
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name].[hash].css'
          }
          if (['.png', '.jpg', '.jpeg', '.svg', '.webp', '.gif'].some((ext) => assetInfo.name.endsWith(ext))) {
            return 'img/[name].[hash].[ext]'
          }
          if (['.ttf', '.woff'].some((ext) => assetInfo.name.endsWith(ext))) {
            return 'fonts/[name].[hash].[ext]'
          }
          return 'assets/[name].[hash].[ext]'
        },
        manualChunks: {
          antd: ['antd'],
          react: ['react', 'react-router', 'react-router-dom'],
          redux: ['redux', 'react-redux', 'redux-thunk']

          // echarts: ['echarts'],
          // vue: ['vue', 'vue-router'],
          // pinia: ['pinia'],
          // vant: ['vant'],
          // lodash: ['lodash']
        }
      }
    }
  },
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
        }),
        postCssPxToRem({
          // 自适应，px>rem转换
          rootValue: 192, // 这里代表的是1rem等于多少rootValue的px。75表示750设计稿，37.5表示375设计稿
          propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
          selectorBlackList: ['norem', 'ignore', 'ant'], // 过滤掉norem-开头的class，不进行rem转换
          mediaQuery: false // 允许在媒体查询中转换 px
        }),
        tailwindcss({
          content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
          theme: {
            extend: {}
          },
          plugins: []
        })
      ]
    }
  }
})
